<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" title="My warehouse">
			</c-navigation-bar>
		
		<view class="container">
			<view class="productBox" v-for="(item,index) in shelfList" :key="item.id" >
				<view class="productBox_top">
					<u-image :src='item.image' style='height: 160rpx;width: 160rpx;'></u-image>
					<view class="productBox-child" style="margin-left: 12rpx;">
						<view class="check-box">
							<view class="">
								{{item.name}}
							</view>
							<u-checkbox @change="checkChange(index)" :value="item.ck" shape="circle" :name="item.name">
								<!-- {{item.name}} -->
							</u-checkbox>
						</view>
						
						<view class="" style="color: #91909A;font-size: 24Frpx; margin: 12rpx 0 18rpx 0;">
							Color:{{item.color}}
						</view>
						<view class="" style="color: #91909A;font-size: 24rpx; ">
							Specifications：{{item.specifications}}
						</view>
					</view>
				</view>
				<view class="productBox_bottom">
					<view class="statistics">
						<view class="">
							Total quantity <text style='color:#000;margin-left: 10rpx;'>{{item.totalQuantity}}</text>
						</view>
						<view class="statistics_two">
							Total amount <text style='color:#000;margin-left: 10rpx;'>${{item.totalAmount}}</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
			<view class="purchase-bottom">
				<view class="purchase-count">
					<view class="text5">
						Total(x item)
					</view>
					<view class="text6">
						$XX
					</view>
				</view>
				<view class="pay-btn">
					<u-button type="primary" class="custom-style" @click="goPurchase">payment</u-button>
				</view>
			</view>
			
		</c-layout>
		<!-- 头部 -->

		

	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				 cartList: [],
				//选中商品
				checkList:[],
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				active: 0,
				shelfList: [{
						name: 'Roller Rabbit',
						url: '',
						ck:false,
						color: 'White',
						specifications: 'XL',
						totalQuantity: '1009',
						totalAmount: '35,99'
					},
					{
						name: 'Axel Arigato',
						url: '',
						ck:false,
						color: 'White',
						specifications: 'XL',
						totalQuantity: '1009',
						totalAmount: '35,99'
					},
					{
						name: 'Herschel Supply Co',
						url: '',
						ck:false,
						color: 'White',
						specifications: 'XL',
						totalQuantity: '1009',
						totalAmount: '35,99'
					},
				],

			}
		},
		onLoad(options) {
			console.log(options);
			let goodId=options.goodsId
			this.$u.get(`/app/h2-shop-goodsinfo/prdouct/${goodId}`).then(res => {
			  console.log(res);
			  this.shelfList=res.data
			})
		},

		methods: {
			//跳转到购买页面
			goPurchase(){
				uni.navigateTo({
					url: '/pages/storyType/storeManagement/purchaseDetail',
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			
			checkChange(index) {
				this.shelfList[index].ck=!this.shelfList[index].ck
				 this.checkList = this.checkList.filter(f => f.id !== id)
				 
				},
			
		},
		
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {




		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .c-navigation-bar{
		border-bottom: 22rpx solid #ffffff !important;
	}
	.modify-page {
		height: 100vh;
		background: #1B1D29;
		.container{
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			height: 80vh;
			overflow: auto;
			background: #FFFFFF;
		}
		.tabs {
			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;


			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.productBox {
			height: 348rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #E1E8E8;
			margin: 30rpx;
			padding: 20rpx;
			
			.productBox_top {
				display: flex;
				padding-bottom: 10px;
				border-bottom: 1px solid #F2F3F5;
				align-items: center;
				.productBox-child{
					width: 100%;
					.check-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						
					}
				}
				
			}

			.productBox_bottom {
				margin-top: 8px;
				display: flex;
				flex-wrap: wrap;
				/* flex: 1; */
				height: 53px;
				align-content: space-between;

				.statistics {
					display: flex;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #91909A;

					.statistics_two {
						margin-left: 58rpx;
					}
				}
			}
		}
		.purchase-bottom{
			display: flex;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			
			justify-content: space-between;
			background-color:#1B1D29  ;
			padding: 32rpx 44rpx  52rpx 50rpx ;
			.text5{
				color: #91909A ;
				font-size: 28rpx;
			}
			.text6{
				color: #91909A ;
				font-size: 40rpx;
				font-weight: 400;
			}
			.custom-style{
				width: 380rpx;
				height: 100rpx;
				background: #2934D0;
				border-radius: 20rpx;
			}
			
		}

		.replenishenmentBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			color: #2934D0;
			width: 230rpx;
			text-align: center;
		}

		.lowerShelfBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			background: #2934D0;
			color: #fff;
			width: 230rpx;
			text-align: center;
			margin: 0 16rpx;
		}

	

	}
</style>

